import React, { useCallback, useEffect, useState } from 'react'
import style from './style.less'
import img from '@/images/supply/turnip.png'
import { Button, Dialog, Ellipsis, NoticeBar, Toast } from 'antd-mobile'
import { ClockCircleOutline, ExclamationCircleOutline } from 'antd-mobile-icons'
import { getDeleteInformation, getStatusQuery } from '@/services/Publish'
import { history } from 'umi'
interface statusQueryDto {
    id: number,
    commodityName: string,
    updateTime: string,
    shopping: string,
    shipmentPlace: string,
    originPlace: string,
    minPrice: string,
    maxPrice: string,
    picture: string,
    quantity: number,
    description: string,
    messages: string,
}
type Props = {
    Status?: number
}
export default (props: Props) => {
    const { Status } = props
    const [goodsList, setGoodsList] = useState<statusQueryDto[]>([])
    const getData = async () => {
        const res = await getStatusQuery({ auditStatus: Status, status: 0, userId: 1 })
        setGoodsList(res)
    }
    const onCancel = useCallback(async (value:number) => {
        Dialog.confirm({
            title: '提示',
            content: '是否取消发布',
            onConfirm: async () => {
                await getDeleteInformation(value)
                Toast.show({
                    icon: 'success',
                    content: '取消发布成功',
                })

            },
        })
    }, []);

    useEffect(() => {
        getData()
    }, [])
    return (
        <div className={style.page}>
            {goodsList?.length > 0 ? (
                <div>
                    {goodsList.map((item) => (
                        <div
                            key={item.id}
                            className={style['list-item']}
                        >
                            {Status === 2 ? (
                                <NoticeBar
                                    icon={<ExclamationCircleOutline />}
                                    content={'驳回原因：' + item?.messages}
                                    wrap
                                    color='alert'
                                />
                            ) : null}

                            <div className={style.con}>
                                <div className={style['con-left']}>
                                    {item?.picture ? (
                                        <img src={item?.picture} alt="商品图片" />
                                    ) : null}
                                </div>
                                <div className={style['con-right']}>
                                    <div className={style.name}>
                                        <span className={style.sign}>白萝卜</span>
                                        <Ellipsis direction='end' content={item?.commodityName} rows={2} />
                                    </div>
                                </div>

                            </div>
                            <div className={style['con-bottom']}>
                                <div className={style.money}>
                                    价格
                                    <span className={style.price}>{item?.minPrice}-{item?.maxPrice}/斤</span>
                                </div>
                                <div className={style.money}>
                                    数量
                                    <span className={style.price}>{item.quantity}斤</span>
                                </div>
                            </div>
                            <div className={style.description}>
                                <div className={style['con-title']}>
                                    <span className={style['con-title-a']}>产地</span>
                                    <span className={style['con-title-b']}>{item?.shipmentPlace}</span>
                                </div>
                                <div className={style['con-title']}>
                                    <span className={style['con-title-a']}>发货地</span>
                                    <span className={style['con-title-b']}>{item?.originPlace}</span>
                                </div>
                                <div className={style['con-title']}>
                                    <span className={style['con-title-a']}>商品描述</span>
                                    <span className={style['con-title-b']}>
                                        <Ellipsis
                                            direction='end'
                                            content={item?.description}
                                            expandText='查看全部'
                                            collapseText='收起'
                                            style={{ color: '#5D7093' }}
                                        />

                                    </span>
                                </div>
                            </div>
                            <div className={style.bottom}>
                                <div className={style['bottom-left']}>
                                    <ClockCircleOutline />
                                    <span>{item?.updateTime}</span>
                                </div>
                                <div className={style['bottom-right']}>
                                    <Button
                                        fill='outline'
                                        size='small'
                                        onClick={()=>onCancel(item.id)}
                                    >
                                        取消发布
                                    </Button>
                                    {Status === 2 || Status === 3 ? (
                                        <Button
                                            fill='outline'
                                            size='small'
                                            color={Status === 2 ? 'success' : undefined}
                                            onClick={()=>{
                                                history.push(`/message/${item.id}`)
                                            }}
                                        >
                                            编辑
                                        </Button>
                                    ) : null}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>

            ) : (
                <div className={style.no}>-暂无数据-</div>
            )}


        </div>
    )
}
